<template>
  <div class="main">
    <govheader
      title="化工产业大脑 · 数据共享"
      @zfNameflagChange="zfNameflagChange"
    ></govheader>
    <govnavigation></govnavigation>
    <el-row class="content" style="margin: 0" :gutter="10" v-if="zfNameflag">
      <el-col :span="8" class="content-left">
        <el-col class="box">
          <div class="title">园区接入情况</div>
          <div class="moveson"></div>
          <div
            class="content-body"
            style="
              background-color: rgba(255, 255, 255, 0.4);
              border-radius: 5px;
              margin: 10px auto;
            "
          >
            <el-row
              type="flex"
              justify="space-around"
              class="content-body-left"
              style="margin-top: 30px"
            >
              <el-col :span="11" class="situation">
                <div></div>
                <div>
                  <div>园区总数</div>
                  <div>{{ allParkNum }}</div>
                </div>
              </el-col>
              <el-col :span="11" class="situation">
                <div></div>
                <div>
                  <div>接入园区总数</div>
                  <div>{{ parkNum }}</div>
                </div>
              </el-col>
            </el-row>
            <div class="content-body-right">
              <div id="accessRate" style="width: 100%; height: 140px"></div>
            </div>
          </div>
          <el-col class="connected">接入园区</el-col>
          <div style="position: relative">
            <div id="map" style="width: 100%; height: 566px"></div>
            <div class="legend-body">
              <div class="legend-content">
                <div class="legend-point" style="background: #005ddc"></div>
                <div class="legend-title">已接入</div>
              </div>
              <div class="legend-content">
                <div class="legend-point" style="background: #a3a3a3"></div>
                <div class="legend-title">未接入</div>
              </div>
            </div>
          </div>
        </el-col>
      </el-col>
      <el-col :span="8" class="content-center">
        <div>
          <div class="area">
            <div class="ball ball1"></div>
            <div class="ball ball2"></div>
            <div class="ball ball3"></div>
            <div class="ball ball4"></div>
            <div class="ball ball5"></div>
            <div class="ball ball6"></div>
            <div class="ball ball7"></div>
            <div class="ball ball8"></div>
          </div>
          <!-- <div class="content-img"></div> -->
          <div
            style="
              width: 96%;
              margin: 20.5px auto;
              background-color: #c9dffe;
              border-radius: 5px;
              padding: 10px;
              color: #486b9d;
              overflow: hidden;
            "
          >
            <div style="float: left; line-height: 40px; font-size: 16px">
              累计汇聚数据
            </div>
            <span
              style="
                font-size: 16px;
                float: right;
                height: 40px;
                line-height: 40px;
              "
              >&nbsp;条</span
            >
            <animate-number
              style="
                float: right;
                color: #1c4ca1;
                font-size: 30px;
                letter-spacing: 2px;
              "
              class="font2"
              from="0"
              :to="allDataSum"
              :key="allDataSum"
              duration="5000"
              from-color="#1492FF"
              to-color="#1492FF"
            >
            </animate-number>
          </div>
          <div
            style="
              width: 96%;
              margin: 10px auto;
              background-color: #c9dffe;
              border-radius: 5px;
              padding: 10px;
              color: #486b9d;
              overflow: hidden;
            "
          >
            <div style="float: left; line-height: 40px; font-size: 16px">
              今日实时汇聚
            </div>
            <span
              style="
                font-size: 16px;
                float: right;
                height: 40px;
                line-height: 40px;
              "
              >&nbsp;条</span
            >
            <animate-number
              style="
                float: right;
                color: #1c4ca1;
                font-size: 30px;
                letter-spacing: 2px;
              "
              class="font2"
              from="0"
              :to="todayDataSum"
              :key="todayDataSum"
              duration="5000"
              from-color="#1492FF"
              to-color="#1492FF"
            >
            </animate-number>
          </div>
        </div>
        <div class="box" style="margin-top: 10px">
          <div class="title" style="padding-left: 5px">数据汇聚趋势</div>
          <div class="moveson" style="margin-left: 5px"></div>
          <div class="content-body">
            <div class="tabs" style="width: fit-content; float: right">
              <div
                :class="active2 === 0 ? 'selectActive' : ''"
                @click="active2Click(0)"
              >
                月
              </div>
              <div
                :class="active2 === 1 ? 'selectActive' : ''"
                @click="active2Click(1)"
                style="border-left: 1px solid #7db2d0"
              >
                周
              </div>
              <div
                :class="active2 === 2 ? 'selectActive' : ''"
                @click="active2Click(2)"
                style="border-left: 1px solid #7db2d0"
              >
                天
              </div>
            </div>
            <div id="convergence" style="width: 100%; height: 194px"></div>
          </div>
        </div>
      </el-col>
      <el-col :span="8" class="content-right">
        <el-col class="box">
          <div class="title">企业接入情况</div>
          <div class="moveson"></div>
          <div class="content-body" style="border-radius: 5px; margin-top: 3px">
            <el-row
              type="flex"
              justify="space-around"
              class="content-body-left"
              style="margin-top: 30px"
            >
              <el-col :span="11" class="situation">
                <div style="background-color: #5f83ff"></div>
                <div>
                  <div>规上化工企业总数</div>
                  <div>{{ chemicalEnt }}</div>
                </div>
              </el-col>
              <el-col :span="11" class="situation">
                <div style="background-color: #5f83ff"></div>
                <div>
                  <div>接入企业总数</div>
                  <div>{{ matchEnt }}</div>
                </div>
              </el-col>
            </el-row>
            <div class="content-body-right">
              <div
                id="enterpriseAccess"
                style="width: 100%; height: 140px"
              ></div>
            </div>
          </div>
        </el-col>
        <el-col class="box">
          <div class="title">数据来源占比</div>
          <div class="moveson"></div>
          <div class="content-body" style="margin-top: 3px">
            <el-col>
              <div id="proportion" style="width: 100%; height: 250px"></div>
            </el-col>
          </div>
        </el-col>
        <el-col class="box">
          <div class="title">数据汇聚实时清单</div>
          <div class="moveson"></div>
          <div class="content-body" style="margin-top: 8px">
            <div id="tableColor">
              <el-table
                ref="table"
                :data="tableData"
                style="width: 100%"
                height="217"
                :row-style="{ height: '0' }"
                :cell-style="{ padding: '6px 0', height: '36px' }"
                stripe
                :row-class-name="tableRowClassName"
              >
                <el-table-column type="index" label="序号"></el-table-column>
                <el-table-column
                  property="tableName"
                  :show-overflow-tooltip="true"
                  label="数据项"
                ></el-table-column>
                <el-table-column
                  property="dataReportingQty"
                  width="50"
                  :show-overflow-tooltip="true"
                  label="条数"
                ></el-table-column>
                <el-table-column
                  property="dataReportingTime"
                  width="200"
                  :show-overflow-tooltip="true"
                  label="接入时间（最新100条）"
                ></el-table-column>
              </el-table>
            </div>
          </div>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>
<script>
const echarts = require("echarts");
import dd from "gdt-jsapi";
import govheader from "@/components/govheader";
import govnavigation from "@/components/govnavigation";
export default {
  name: "zfDataSharing",
  components: { govheader, govnavigation },
  data() {
    return {
      zfNameflag: true,
      year: "",
      center: "",
      center2: "",
      allParkNum: "",
      parkNum: "",
      parkList: [],
      parkJson: {
        '杭州市': {matchParkList: [],disMatchParkList: [],dataIndex: ''},
        '宁波市': {matchParkList: [],disMatchParkList: [],dataIndex: ''},
        '温州市': {matchParkList: [],disMatchParkList: [],dataIndex: ''},
        '嘉兴市': {matchParkList: [],disMatchParkList: [],dataIndex: ''},
        '湖州市': {matchParkList: [],disMatchParkList: [],dataIndex: ''},
        '绍兴市': {matchParkList: [],disMatchParkList: [],dataIndex: ''},
        '金华市': {matchParkList: [],disMatchParkList: [],dataIndex: ''},
        '衢州市': {matchParkList: [],disMatchParkList: [],dataIndex: ''},
        '舟山市': {matchParkList: [],disMatchParkList: [],dataIndex: ''},
        '台州市': {matchParkList: [],disMatchParkList: [],dataIndex: ''},
        '丽水市': {matchParkList: [],disMatchParkList: [],dataIndex: ''},
      },
      option1Data: 0,
      option3Data: [
        {
          xAxis3Data: [],
          series3Data: [],
        },
        {
          xAxis3Data: [],
          series3Data: [],
        },
        {
          xAxis3Data: [],
          series3Data: [],
        },
      ],
      option6Data: 0,
      allDataSum: 0,
      todayDataSum: 0,
      chemicalEnt: "",
      matchEnt: "",
      tableData: [],
      active2: 0,
      myChart1: "",
      option1: "",
      myChart2: "",
      option2: "",
      myChart3: "",
      option3: "",
      myChart6: "",
      option6: "",
      myChart7: "",
      option7: "",
      echarts1Interval: null,
      echarts6Interval: null,
    };
  },
  created() {
    if (window.SITE_CONFIG["sitURL"] === "https://www.plantmate.com/api") {
      dd.getAuthCode({})
        .then((res) => {
          if (res) {
            let params = {
              applicationFlag: "20",
              authCode: res.auth_code,
            };
            this.$http
              .post(`/home/sys/loginfree/authentication`, params)
              .then(({ data: res }) => {
                console.log("res2:", res);
                this.$store.commit("zfName", res.data.lastName);
                if (res.code !== 0) {
                  this.zfNameflag = false;
                }
              })
              .catch(() => {
                this.zfNameflag = false;
              });
          }
        })
        .catch(() => {
          this.zfNameflag = false;
        });
    }
  },
  mounted() {
    let _this = this;
    this.year = new Date().getFullYear() - 1;
    this.getConvergence();
    this.getProportion();
    this.$http
      .post(`/home/government/govDataShare/dataShare`, {})
      .then(({ data: res }) => {
        this.tableData = res.data.realTimeDataList;
        this.allParkNum = res.data.allParkNum;
        this.parkNum = res.data.parkNum;
        this.option1Data = res.data.parkMatchPer;
        this.option6Data = res.data.entMatchPer;
        let map1 = {};
        res.data.matchParkList.forEach((item) => {
          this.parkJson[item.cityName].matchParkList.push(item.parkAbbreviation)
          switch (item.cityCode) {
            case '330100':
              item.dataIndex = 0;
              this.parkJson[item.cityName].dataIndex = 0
              break;
            case '330200':
              item.dataIndex = 1;
              this.parkJson[item.cityName].dataIndex = 1
              break;
            case '330300':
              item.dataIndex = 2;
              this.parkJson[item.cityName].dataIndex = 2
              break;
            case '330400':
              item.dataIndex = 3;
              this.parkJson[item.cityName].dataIndex = 3
              break;
            case '330500':
              item.dataIndex = 4;
              this.parkJson[item.cityName].dataIndex = 4
              break;
            case '330600':
              item.dataIndex = 5;
              this.parkJson[item.cityName].dataIndex = 5
              break;
            case '330700':
              item.dataIndex = 6;
              this.parkJson[item.cityName].dataIndex = 6
              break;
            case '330800':
              item.dataIndex = 7;
              this.parkJson[item.cityName].dataIndex = 7
              break;
            case '330900':
              item.dataIndex = 8;
              this.parkJson[item.cityName].dataIndex = 8
              break;
            case '331000':
              item.dataIndex = 9;
              this.parkJson[item.cityName].dataIndex = 9
              break;
            case '331100':
              item.dataIndex = 10;
              this.parkJson[item.cityName].dataIndex = 10
              break;
        } 
          map1[item.parkAbbreviation] = [
            item.longitude,
            item.latitude,
            item.parkCode,
            item.parkName,
            item.dataIndex
          ];
        });
        let map2 = {};
        res.data.disMatchParkList.forEach((item) => {
          this.parkJson[item.cityName].disMatchParkList.push(item.parkAbbreviation)
          switch (item.cityCode) {
            case '330100':
              item.dataIndex = 0;
              this.parkJson[item.cityName].dataIndex = 0
              break;
            case '330200':
              item.dataIndex = 1;
              this.parkJson[item.cityName].dataIndex = 1
              break;
            case '330300':
              item.dataIndex = 2;
              this.parkJson[item.cityName].dataIndex = 2
              break;
            case '330400':
              item.dataIndex = 3;
              this.parkJson[item.cityName].dataIndex = 3
              break;
            case '330500':
              item.dataIndex = 4;
              this.parkJson[item.cityName].dataIndex = 4
              break;
            case '330600':
              item.dataIndex = 5;
              this.parkJson[item.cityName].dataIndex = 5
              break;
            case '330700':
              item.dataIndex = 6;
              this.parkJson[item.cityName].dataIndex = 6
              break;
            case '330800':
              item.dataIndex = 7;
              this.parkJson[item.cityName].dataIndex = 7
              break;
            case '330900':
              item.dataIndex = 8;
              this.parkJson[item.cityName].dataIndex = 8
              break;
            case '331000':
              item.dataIndex = 9;
              this.parkJson[item.cityName].dataIndex = 9
              break;
            case '331100':
              item.dataIndex = 10;
              this.parkJson[item.cityName].dataIndex = 10
              break;
        } 
          map2[item.parkAbbreviation] = [
            item.longitude,
            item.latitude,
            item.parkCode,
            item.parkName,
            item.dataIndex
          ];
        });
        this.center = map1;
        this.center2 = map2;
        for (let i in this.parkJson) {
          this.parkList.push({
            name:i,
            matchParkList: this.parkJson[i].matchParkList.join('<br/>&nbsp;&nbsp;'),
            disMatchParkList: this.parkJson[i].disMatchParkList.join('<br/>&nbsp;&nbsp;'),
            dataIndex:this.parkJson[i].dataIndex
          })
        }
        this.allDataSum = res.data.allDataSum;
        this.todayDataSum = res.data.todayDataSum;
        this.option3Data[0].xAxis3Data = this.option3.xAxis.data =
          res.data.monthList;
        this.option3Data[0].series3Data = this.option3.series[0].data =
          res.data.monthValueList;
        this.option3Data[1].xAxis3Data = res.data.weekList;
        this.option3Data[1].series3Data = res.data.weekValueList;
        this.option3Data[2].xAxis3Data = res.data.dayList;
        this.option3Data[2].series3Data = res.data.dayValueList;
        this.chemicalEnt = res.data.chemicalEnt;
        this.matchEnt = res.data.matchEnt;
        this.option7.series[0].data = res.data.sourceList;
        clearInterval(_this.intervalId);
        this.$refs.table.bodyWrapper.scrollTop = 0;
        this.getright_table();
        this.$nextTick(() => {
          this.getAccessRate();
          this.renderMyChart();
          this.getEnterpriseAccess();
          this.myChart3.setOption(this.option3);
          this.myChart7.setOption(this.option7);
        });
      })
      .catch(() => {});
  },
  beforeDestroy() {
    clearInterval(this.echarts1Interval);
    clearInterval(this.echarts6Interval);
  },
  methods: {
    zfNameflagChange(val) {
      this.zfNameflag = val;
    },
    getright_table() {
      var isScroll = true;
      var waitFlag = 0;
      // 拿到表格挂载后的真实DOM
      const table = this.$refs.table;
      // 拿到表格中承载数据的div元素
      const divData = table.bodyWrapper;
      this.addEvent(divData, "mouseenter", function () {
        isScroll = false;
      });
      this.addEvent(divData, "mouseleave", function () {
        isScroll = true;
      });
      this.intervalId = setInterval(() => {
        if (isScroll) {
          // 元素自增距离顶部1像素
          divData.scrollTop += 1;
          // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
          if (
            divData.clientHeight + divData.scrollTop + 1 >=
            divData.scrollHeight
          ) {
            // 重置table距离顶部距离
            divData.scrollTop = 0;
          }
        }
      }, 100);
    },
    addEvent(obj, sEvent, fn) {
      if (obj.attachEvent) {
        obj.attachEvent("on" + sEvent, fn);
      } else {
        obj.addEventListener(sEvent, fn, false);
      }
    },
    tableRowClassName({ row, rowIndex }) {
      if ((rowIndex + 1) % 2 === 0) {
        return "statistics-warning-row";
      } else {
        return "";
      }
    },
    active2Click(val) {
      this.active2 = val;
      this.option3.xAxis.data = this.option3Data[val].xAxis3Data;
      this.option3.series[0].data = this.option3Data[val].series3Data;
      this.myChart3.setOption(this.option3);
    },
    getAccessRate() {
      let _this = this;
      this.myChart1 = echarts.init(document.getElementById("accessRate"));
      let angle = 0;
      let value = _this.option1Data;

      function getCirlPoint(x0, y0, r, angle) {
        let x1 = x0 + r * Math.cos((angle * Math.PI) / 180);
        let y1 = y0 + r * Math.sin((angle * Math.PI) / 180);
        return {
          x: x1,
          y: y1,
        };
      }

      this.option1 = {
        title: {
          text: "{a|" + value + "}{c|%}\n{d|园区接入率}",
          x: "center",
          y: "50px",
          textStyle: {
            rich: {
              a: {
                fontSize: 20,
                color: "#4FC0FF",
              },
              c: {
                fontSize: 16,
                color: "#4FC0FF",
                // padding: [5,0]
              },
              d: {
                fontSize: 10,
                color: "#4B5463",
                lineHeight: 16,
              },
            },
          },
        },
        series: [
          {
            name: "ring5",
            type: "custom",
            coordinateSystem: "none",
            renderItem: function (params, api) {
              return {
                type: "arc",
                shape: {
                  cx: api.getWidth() / 2,
                  cy: api.getHeight() / 2,
                  r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.75,
                  startAngle: ((0 + angle) * Math.PI) / 180,
                  endAngle: ((90 + angle) * Math.PI) / 180,
                },
                style: {
                  stroke: "#0CD3DB",
                  fill: "transparent",
                  lineWidth: 1.5,
                },
                silent: true,
              };
            },
            data: [0],
          },
          {
            name: "ring5",
            type: "custom",
            coordinateSystem: "none",
            renderItem: function (params, api) {
              return {
                type: "arc",
                shape: {
                  cx: api.getWidth() / 2,
                  cy: api.getHeight() / 2,
                  r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.75,
                  startAngle: ((180 + angle) * Math.PI) / 180,
                  endAngle: ((270 + angle) * Math.PI) / 180,
                },
                style: {
                  stroke: "#0CD3DB",
                  fill: "transparent",
                  lineWidth: 1.5,
                },
                silent: true,
              };
            },
            data: [0],
          },
          {
            name: "ring5",
            type: "custom",
            coordinateSystem: "none",
            renderItem: function (params, api) {
              return {
                type: "arc",
                shape: {
                  cx: api.getWidth() / 2,
                  cy: api.getHeight() / 2,
                  r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.85,
                  startAngle: ((270 + -angle) * Math.PI) / 180,
                  endAngle: ((40 + -angle) * Math.PI) / 180,
                },
                style: {
                  stroke: "#0CD3DB",
                  fill: "transparent",
                  lineWidth: 1.5,
                },
                silent: true,
              };
            },
            data: [0],
          },
          {
            name: "ring5",
            type: "custom",
            coordinateSystem: "none",
            renderItem: function (params, api) {
              return {
                type: "arc",
                shape: {
                  cx: api.getWidth() / 2,
                  cy: api.getHeight() / 2,
                  r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.85,
                  startAngle: ((90 + -angle) * Math.PI) / 180,
                  endAngle: ((220 + -angle) * Math.PI) / 180,
                },
                style: {
                  stroke: "#0CD3DB",
                  fill: "transparent",
                  lineWidth: 1.5,
                },
                silent: true,
              };
            },
            data: [0],
          },
          {
            name: "ring5",
            type: "custom",
            coordinateSystem: "none",
            renderItem: function (params, api) {
              let x0 = api.getWidth() / 2;
              let y0 = api.getHeight() / 2;
              let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.85;
              let point = getCirlPoint(x0, y0, r, 90 + -angle);
              return {
                type: "circle",
                shape: {
                  cx: point.x,
                  cy: point.y,
                  r: 4,
                },
                style: {
                  stroke: "#0CD3DB", // 粉
                  fill: "#0CD3DB",
                },
                silent: true,
              };
            },
            data: [0],
          },
          {
            name: "ring5", // 绿点
            type: "custom",
            coordinateSystem: "none",
            renderItem: function (params, api) {
              let x0 = api.getWidth() / 2;
              let y0 = api.getHeight() / 2;
              let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.85;
              let point = getCirlPoint(x0, y0, r, 270 + -angle);
              return {
                type: "circle",
                shape: {
                  cx: point.x,
                  cy: point.y,
                  r: 4,
                },
                style: {
                  stroke: "#0CD3DB", // 绿
                  fill: "#0CD3DB",
                },
                silent: true,
              };
            },
            data: [0],
          },
          {
            type: "pie",
            radius: ["68%", "55%"],
            silent: true,
            clockwise: true,
            startAngle: 90,
            z: 0,
            zlevel: 0,
            label: {
              normal: {
                position: "center",
              },
            },
            data: [
              {
                value: value,
                name: "",
                itemStyle: {
                  normal: {
                    color: "#4FC0FF",
                  },
                },
              },
              {
                value: 100 - value,
                name: "",
                label: {
                  normal: {
                    show: false,
                  },
                },
                itemStyle: {
                  normal: {
                    color: "#5F83FF",
                  },
                },
              },
            ],
          },
          {
            name: "",
            type: "gauge",
            radius: "58%",
            center: ["50%", "50%"],
            startAngle: 0,
            endAngle: 359.9,
            splitNumber: 8,
            hoverAnimation: true,
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
              length: 60,
              lineStyle: {
                width: 5,
                color: "#061740",
              },
            },
            axisLabel: {
              show: false,
            },
            pointer: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                opacity: 0,
              },
            },
            detail: {
              show: false,
            },
            data: [
              {
                value: 0,
                name: "",
              },
            ],
          },
        ],
      };
      this.myChart1.setOption(this.option1);

      function draw() {
        angle = angle + 3;
        _this.myChart1.setOption(_this.option1, true);
        // window.requestAnimationFrame(draw);
      }
      setTimeout(() => {
        _this.echarts1Interval = setInterval(function () {
          draw();
        }, 50);
      }, 1000);
    },
    getEnterpriseAccess() {
      let _this = this;
      this.myChart6 = echarts.init(document.getElementById("enterpriseAccess"));
      let angle = 0;
      let value = _this.option6Data;

      function getCirlPoint(x0, y0, r, angle) {
        let x1 = x0 + r * Math.cos((angle * Math.PI) / 180);
        let y1 = y0 + r * Math.sin((angle * Math.PI) / 180);
        return {
          x: x1,
          y: y1,
        };
      }
      this.option6 = {
        title: {
          text: "{a|" + value + "}{c|%}\n{d|企业接入率}",
          x: "center",
          y: "50px",
          textStyle: {
            rich: {
              a: {
                fontSize: 20,
                color: "#4FC0FF",
              },
              c: {
                fontSize: 16,
                color: "#4FC0FF",
                // padding: [5,0]
              },
              d: {
                fontSize: 10,
                color: "#4B5463",
                lineHeight: 16,
              },
            },
          },
        },
        series: [
          {
            name: "ring5",
            type: "custom",
            coordinateSystem: "none",
            renderItem: function (params, api) {
              return {
                type: "arc",
                shape: {
                  cx: api.getWidth() / 2,
                  cy: api.getHeight() / 2,
                  r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.75,
                  startAngle: ((0 + angle) * Math.PI) / 180,
                  endAngle: ((90 + angle) * Math.PI) / 180,
                },
                style: {
                  stroke: "#0CD3DB",
                  fill: "transparent",
                  lineWidth: 1.5,
                },
                silent: true,
              };
            },
            data: [0],
          },
          {
            name: "ring5",
            type: "custom",
            coordinateSystem: "none",
            renderItem: function (params, api) {
              return {
                type: "arc",
                shape: {
                  cx: api.getWidth() / 2,
                  cy: api.getHeight() / 2,
                  r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.75,
                  startAngle: ((180 + angle) * Math.PI) / 180,
                  endAngle: ((270 + angle) * Math.PI) / 180,
                },
                style: {
                  stroke: "#0CD3DB",
                  fill: "transparent",
                  lineWidth: 1.5,
                },
                silent: true,
              };
            },
            data: [0],
          },
          {
            name: "ring5",
            type: "custom",
            coordinateSystem: "none",
            renderItem: function (params, api) {
              return {
                type: "arc",
                shape: {
                  cx: api.getWidth() / 2,
                  cy: api.getHeight() / 2,
                  r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.85,
                  startAngle: ((270 + -angle) * Math.PI) / 180,
                  endAngle: ((40 + -angle) * Math.PI) / 180,
                },
                style: {
                  stroke: "#0CD3DB",
                  fill: "transparent",
                  lineWidth: 1.5,
                },
                silent: true,
              };
            },
            data: [0],
          },
          {
            name: "ring5",
            type: "custom",
            coordinateSystem: "none",
            renderItem: function (params, api) {
              return {
                type: "arc",
                shape: {
                  cx: api.getWidth() / 2,
                  cy: api.getHeight() / 2,
                  r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.85,
                  startAngle: ((90 + -angle) * Math.PI) / 180,
                  endAngle: ((220 + -angle) * Math.PI) / 180,
                },
                style: {
                  stroke: "#0CD3DB",
                  fill: "transparent",
                  lineWidth: 1.5,
                },
                silent: true,
              };
            },
            data: [0],
          },
          {
            name: "ring5",
            type: "custom",
            coordinateSystem: "none",
            renderItem: function (params, api) {
              let x0 = api.getWidth() / 2;
              let y0 = api.getHeight() / 2;
              let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.85;
              let point = getCirlPoint(x0, y0, r, 90 + -angle);
              return {
                type: "circle",
                shape: {
                  cx: point.x,
                  cy: point.y,
                  r: 4,
                },
                style: {
                  stroke: "#0CD3DB", // 粉
                  fill: "#0CD3DB",
                },
                silent: true,
              };
            },
            data: [0],
          },
          {
            name: "ring5", // 绿点
            type: "custom",
            coordinateSystem: "none",
            renderItem: function (params, api) {
              let x0 = api.getWidth() / 2;
              let y0 = api.getHeight() / 2;
              let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.85;
              let point = getCirlPoint(x0, y0, r, 270 + -angle);
              return {
                type: "circle",
                shape: {
                  cx: point.x,
                  cy: point.y,
                  r: 4,
                },
                style: {
                  stroke: "#0CD3DB", // 绿
                  fill: "#0CD3DB",
                },
                silent: true,
              };
            },
            data: [0],
          },
          {
            type: "pie",
            radius: ["68%", "55%"],
            silent: true,
            clockwise: true,
            startAngle: 90,
            z: 0,
            zlevel: 0,
            label: {
              normal: {
                position: "center",
              },
            },
            data: [
              {
                value: value,
                name: "",
                itemStyle: {
                  normal: {
                    color: "#4FC0FF",
                  },
                },
              },
              {
                value: 100 - value,
                name: "",
                label: {
                  normal: {
                    show: false,
                  },
                },
                itemStyle: {
                  normal: {
                    color: "#5F83FF",
                  },
                },
              },
            ],
          },
          {
            name: "",
            type: "gauge",
            radius: "58%",
            center: ["50%", "50%"],
            startAngle: 0,
            endAngle: 359.9,
            splitNumber: 8,
            hoverAnimation: true,
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
              length: 60,
              lineStyle: {
                width: 5,
                color: "#061740",
              },
            },
            axisLabel: {
              show: false,
            },
            pointer: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                opacity: 0,
              },
            },
            detail: {
              show: false,
            },
            data: [
              {
                value: 0,
                name: "",
              },
            ],
          },
        ],
      };
      this.myChart6.setOption(this.option6);

      function draw() {
        angle = angle + 3;
        _this.myChart6.setOption(_this.option6, true);
        // window.requestAnimationFrame(draw);
      }
      setTimeout(() => {
        _this.echarts6Interval = setInterval(function () {
          draw();
        }, 50);
      }, 1000);
    },
    // 浙江省地图
    renderMyChart() {
      let _this = this;
      this.myChart2 = echarts.init(document.getElementById("map"));
      let uploadedDataURL = require("./zhejiang.json");
      let scatterData1 = [];
      let scatterData2 = [];
      for (let item in this.center) {
        scatterData1.push(this.center[item].concat(item));
      }
      for (let item in this.center2) {
        scatterData2.push(this.center2[item].concat(item));
      }
      echarts.registerMap("js", uploadedDataURL);
      this.option2 = {
        // title: {
        //   text: "浙江省化工产业分布",
        //   top: "10px",
        //   textStyle: {
        //     width: "100%",
        //     color: "#1c4ca1",
        //     "font-weight": 700,
        //   },
        // },
        tooltip: {
          trigger: 'item',
          extraCssText: 'z-index: 9',
          backgroundColor:'rgba(19, 130, 221,0.6)',
          textStyle: {
            color: "#ffffff",
          },
          formatter: function (para) {
            if (para.seriesType === "map") {
              if (
                para.data.matchParkList !== "" &&
                para.data.disMatchParkList !== ""
              ) {
                return (
                  '<div style="text-align: center;font-weight: 600">' +
                  para.name +
                  "</div>" +
                  '<span style="color:#fcaf17;font-weight:600">已接入:</span><br/>&nbsp;&nbsp;' +
                  para.data.matchParkList +
                  "<br>" +
                  '<span style="color:red;;font-weight: 600">未接入:</span><br/>&nbsp;&nbsp;' +
                  para.data.disMatchParkList +
                  "</div>"
                );
              } else if (para.data.matchParkList === "") {
                return (
                  '<div style="text-align: center;font-weight: 600">' +
                  para.name +
                  "</div>" +
                  '<span style="color:red;;font-weight: 600">未接入:</span><br/>&nbsp;&nbsp;' +
                  para.data.disMatchParkList +
                  "</div>"
                );
              } else if (para.data.disMatchParkList === "") {
                return (
                  '<div style="text-align: center;font-weight: 600">' +
                  para.name +
                  "</div>" +
                  '<span style="color:#fcaf17;;font-weight: 600">已接入:</span><br/>&nbsp;&nbsp;' +
                  para.data.matchParkList +
                  "</div>"
                );
              }
            } else {
              return "";
            }
          },
        },
        geo: [
          {
            map: "js",
            aspectScale: 0.9,
            roam: true, // 是否允许缩放
            layoutSize: "100%",
            layoutCenter: ["50%", "55%"],
            zoom: 0.9,
            itemStyle: {
              areaColor: "rgba(156, 216, 255, 0.7)",
              borderColor: "rgb(27, 172, 255)",
              borderWidth: 1,
            },
            emphasis: {
              itemStyle: {
                areaColor: "#005ddc",
              },
              label: {
                show: true,
                color: "#ffffff",
              },
            },
            label: {
              show: true,
              color: "#333333",
            },
            zlevel: 3,
          },
        ],
        series: [
          {
            type: "map",
            geoIndex: 0,
            data: this.parkList,
          },
          {
            type: "effectScatter",
            coordinateSystem: "geo",
            geoIndex: 0,
            symbol: "circle",
            symbolSize: 2,
            showEffectOn: "render",
            rippleEffect: {
              brushType: "fill",
              scale: 3,
            },
            hoverAnimation: true,
            itemStyle: {
              normal: {
                color: "rgb(0, 141, 221)",
              },
            },
            label: {
              normal: {
                formatter: function (para) {
                  return para.data[5];
                },
                position: "right",
                color: "#333333",
                borderColor: "#005DDC",
                borderWidth: 1,
                borderType: "solid",
                padding: 5,
                backgroundColor: "rgba(255, 255, 255, 1)",
                show: false,
              },
              emphasis: {
                show: true,
              },
            },
            emphasis: {
              label: {
                show: true,
              },
              itemStyle: {
                color: "rgb(255, 155, 55)",
                borderColor: "rgb(255, 155, 55)",
                borderWidth: 6,
              },
            },
            symbol: "circle",
            symbolSize: 6,
            data: scatterData1,
            zlevel: 10,
          },
          {
            type: "scatter",
            coordinateSystem: "geo",
            itemStyle: {
              normal: {
                color: "#A3A3A3",
              },
            },
            label: {
              normal: {
                formatter: function (para) {
                  return para.data[5];
                },
                position: "right",
                color: "#333333",
                borderColor: "#005DDC",
                borderWidth: 1,
                borderType: "solid",
                padding: 5,
                backgroundColor: "rgba(255, 255, 255, 1)",
                show: false,
              },
              emphasis: {
                show: true,
              },
            },
            symbol: "circle",
            symbolSize: 6,
            data: scatterData2,
            zlevel: 9,
          },
        ],
      };
      this.myChart2.on("click", (params) => {
        console.log(params);
        if (
          params.componentType === "series" &&
          params.seriesType === "effectScatter"
        ) {
          this.$router.push({
            name: "zfParkOverviewDetail",
            query: {
              parkCode: params.data[2],
              parkName: params.data[3],
              longitude: params.data[0],
              latitude: params.data[1],
              year: this.year,
            },
          });
        }
      });
      this.myChart2.setOption(this.option2);
      this.autoPlay1(_this.myChart2, _this.option2, "startCharts2");
    },
    getConvergence() {
      let _this = this;
      this.myChart3 = echarts.init(document.getElementById("convergence"));
      this.option3 = {
        tooltip: {
          trigger: "item",
          formatter: "{b}: {c} 条",
          confine: true,
        },
        dataZoom: [
          {
            type: "inside",
            startValue: 0,
            endValue: 8,
            xAxisIndex: [0],
            zoomLock: true,
          },
        ],
        grid: {
          top: "15%",
          left: "3%",
          right: "6%",
          bottom: "5%",
          containLabel: true,
        },
        color: ["rgba(0, 231, 224, .4)"],
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [],
          axisLabel: {
            interval: 0,
          },
        },
        yAxis: {
          type: "value",
          name: "数据量/条",
        },
        series: [
          {
            data: [],
            type: "line",
            areaStyle: {},
          },
        ],
      };
      this.myChart3.setOption(this.option3);
      this.autoPlay(_this.myChart3, _this.option3, "startCharts3");
    },
    getProportion() {
      let _this = this;
      this.myChart7 = echarts.init(document.getElementById("proportion"));
      this.option7 = {
        animationDuration: 5000,
        tooltip: {
          trigger: "item",
        },
        color: ["#00A3FF", "#00DBD4", "#A885F0", "#5F83FF", "#65D77B"],
        legend: {
          right: 10,
          orient: "vertical",
          type: "scroll",
        },
        series: [
          {
            type: "pie",
            radius: [30, 100],
            center: ["40%", "50%"],
            roseType: "area",
            data: [],
          },
        ],
      };
      this.myChart7.setOption(this.option7);
      this.autoPlay(_this.myChart7, _this.option7, "startCharts7");
    },
    // 自动播放
    autoPlay(myChart, option, timer) {
      let flag = true;
      let charPiecurrentIndex = 0;
      // 鼠标移动上去的时候的高亮动画
      myChart.on("mouseover", function (param) {
        if (param.componentType === "series") {
          flag = false;
          clearInterval(timer);
          //取消之前高亮图形
          myChart.dispatchAction({
            type: "downplay",
            seriesIndex: 0,
            dataIndex: charPiecurrentIndex,
          });

          charPiecurrentIndex = param.dataIndex;
          //**解决文章所述问题**// //记录上一次选中值重新进入时取消高亮

          //高亮当前图形
          myChart.dispatchAction({
            type: "highlight",
            seriesIndex: 0,
            dataIndex: param.dataIndex,
          });

          myChart.dispatchAction({
            type: "showTip",
            seriesIndex: 0,
            dataIndex: param.dataIndex,
          });
        }
      });

      //图标随窗口大小缩放
      window.addEventListener("resize", function () {
        myChart.resize();
      });

      //自动高亮显示
      var chartHover = function () {
        var dataLen = option.series[0].data.length;

        // 取消之前高亮的图形
        myChart.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex,
        });
        charPiecurrentIndex = (charPiecurrentIndex + 1) % dataLen;

        // 高亮当前图形
        myChart.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex,
        });
        // 显示 tooltip
        myChart.dispatchAction({
          type: "showTip",
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex,
        });
      };

      timer = setInterval(chartHover, 2000);
      // 4、鼠标移出之后，恢复自动高亮
      myChart.on("mouseout", function (param) {
        if (!flag) {
          timer = setInterval(chartHover, 2000);
          flag = true;
        }
      });
    },
    // 地图自动播放
    autoPlay1(myChart, option, timer) {
      let flag = true;
      let charPiecurrentIndex = 0;
      // 鼠标移动上去的时候的高亮动画
      myChart.on("mouseover", function (param) {
        console.log(param);
        if ((param.componentType === "series"&&param.seriesType === "scatter") || (param.componentType === "series"&&param.seriesType === "effectScatter")) {
          flag = false;
          clearInterval(timer);
          //取消之前高亮图形
          myChart.dispatchAction({
            type: "downplay",
            seriesIndex: 0,
            dataIndex: charPiecurrentIndex,
          });

          charPiecurrentIndex = param.data[4];
          //**解决文章所述问题**// //记录上一次选中值重新进入时取消高亮

          //高亮当前图形
          myChart.dispatchAction({
            type: "highlight",
            seriesIndex: 0,
            dataIndex: param.data[4],
          });

          myChart.dispatchAction({
            type: "showTip",
            seriesIndex: 0,
            dataIndex: param.data[4],
          });
        }
        if (param.componentType === "series"&&param.seriesType === "map") {
          flag = false;
          clearInterval(timer);
          //取消之前高亮图形
          myChart.dispatchAction({
            type: "downplay",
            seriesIndex: 0,
            dataIndex: charPiecurrentIndex,
          });

          charPiecurrentIndex = param.data.dataIndex;
          //**解决文章所述问题**// //记录上一次选中值重新进入时取消高亮

          //高亮当前图形
          myChart.dispatchAction({
            type: "highlight",
            seriesIndex: 0,
            dataIndex: param.data.dataIndex,
          });

          myChart.dispatchAction({
            type: "showTip",
            seriesIndex: 0,
            dataIndex: param.data.dataIndex,
          });
        }
      });

      //图标随窗口大小缩放
      window.addEventListener("resize", function () {
        myChart.resize();
      });

      //自动高亮显示
      var chartHover = function () {
        var dataLen = option.series[0].data.length;

        // 取消之前高亮的图形
        myChart.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex,
        });
        charPiecurrentIndex = (charPiecurrentIndex + 1) % dataLen;

        // 高亮当前图形
        myChart.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex,
        });
        // 显示 tooltip
        myChart.dispatchAction({
          type: "showTip",
          seriesIndex: 0,
          dataIndex: charPiecurrentIndex,
        });
      };

      timer = setInterval(chartHover, 2000);
      // 4、鼠标移出之后，恢复自动高亮
      myChart.on("mouseout", function (param) {
        if (!flag) {
          timer = setInterval(chartHover, 2000);
          flag = true;
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.main {
  background-image: url("../../../assets/img/zf/bg.png");
  background-size: 100% 100%;
}
.top {
  height: 80px;
  line-height: 60px;
  box-sizing: border-box;
  color: rgb(115, 188, 235);
  background-image: url("../../../assets/img/zf/top_bg.png");
  background-size: 100% 100%;
}
.box {
  border: 1px solid #ffffff;
  background-color: rgba(255, 255, 255, 0.5);
  padding-top: 10px;
  margin-bottom: 10px;
}
.title {
  width: 100%;
  color: #1c4ca1;
  font-weight: 700;
  font-size: 16px;
}
.content {
  padding: 5px 0 0;
}
.content-body {
  padding: 5px;
  margin-top: 5px;
  overflow: hidden;
  > div {
    float: left;
    overflow: hidden;
  }
  .content-body-left {
    width: 55%;
  }
  .content-body-right {
    width: 45%;
  }
}
.content-body-left-top {
  font-size: 12px;
}
.tabs {
  width: 100%;
  overflow: hidden;
  margin-bottom: 10px;
  > div {
    float: left;
    color: #7db2d0;
    padding: 0 7px;
    cursor: pointer;
  }
}
.selectActive {
  color: #00a3ff !important;
  font-weight: 600;
}
.content-body-left-box {
  width: 48%;
  margin: 1%;
  float: left;
  margin: 10px auto;
}
.content-body-left-bottom {
  color: rgb(115, 188, 235);
  font-weight: 600;
  font-size: 18px;
  margin: 15px auto;
}
.content-body-top,
.content-body-bottom {
  width: 100%;
}
.colorBox {
  height: 54px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  font-size: 12px;
  color: #ffffff;
}
.box1 {
  background-image: url("../../../assets/img/zf/12.png");
}
.box2 {
  background-image: url("../../../assets/img/zf/11.png");
}
.box3 {
  background-image: url("../../../assets/img/zf/10.png");
}
.overview {
  height: 55px;
  line-height: 55px;
}
.enterprise-box {
  background-color: rgb(219, 239, 255);
  border-radius: 15px;
  overflow: hidden;
  padding: 10px;
  > div:nth-child(1) {
    float: left;
    color: #1c4ca1;
  }
  > div:nth-child(2) {
    float: right;
    color: #00a3ff;
  }
}
.situation > div:first-child {
  background-color: #00a3ff;
  height: 10px;
  border-radius: 10px 10px 0 0;
}
.situation > div:last-child {
  background-color: #d2e9fb;
  border-radius: 0 0 5px 5px;
  > div:first-child {
    text-align: center;
    height: 40px;
    line-height: 40px;
  }
  > :last-child {
    color: #00a3ff;
    font-size: 24px;
    text-align: center;
    height: 40px;
    line-height: 40px;
  }
}
.legend-body {
  position: absolute;
  bottom: 5px;
  right: 5px;
  width: 20%;
  height: 80px;
  .legend-content {
    width: 100%;
    height: 16px;
    margin-bottom: 5px;
    .legend-point {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      float: left;
      margin-right: 5px;
      margin-top: 4px;
    }
    .legend-title {
      font-size: 12px;
      color: #4b5463;
      float: left;
      line-height: 16px;
    }
    .legend-value {
      float: right;
      font-size: 14px;
      font-weight: 600;
    }
  }
}
.content-body /deep/ .el-table th {
  background-color: #cadfff !important;
  color: #4a6899;
  font-size: 12px;
  padding: 6px 0;
}
.content-body /deep/ .el-table,
.el-table__expanded-cell {
  background-color: transparent;
}

.content-body /deep/ .el-table tr {
  background-color: transparent !important;
}
.content-body /deep/ .el-table--enable-row-transition .el-table__body td,
.el-table .cell {
  background-color: transparent;
}
#tableColor,
#tableColor1,
#tableColor2,
#tableColor3,
#tableColor4 {
  width: 100%;
}
.content-body #tableColor /deep/ .statistics-warning-row,
.content-body #tableColor1 /deep/ .statistics-warning-row,
.content-body #tableColor2 /deep/ .statistics-warning-row,
.content-body #tableColor3 /deep/ .statistics-warning-row,
.content-body #tableColor4 /deep/ .statistics-warning-row {
  background-color: #d6e6ff !important;
}
//滚动条的宽度
.main ::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
.main ::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  background: rgba(0, 90, 255, 0.1);
}
.main ::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  -webkit-box-shadow: inset 0 0 5px rgba(0, 90, 255, 0.2);
  border-radius: 10px;
  background: #ededed;
}
.connected {
  height: 15px;
  text-align: center;
  color: #1c4ca1;
  font-weight: 600;
  font-size: 14px;
  background-image: url("../../../assets/img/zf/13.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.content-img {
  width: 85%;
  margin: 0 auto;
  height: 380px;
  background-image: url("../../../assets/img/zf/14.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.area {
  width: 85%;
  margin: 0 auto;
  height: 330px;
  background-image: url("../../../assets/img/zf/3dbg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: relative;
}
.area > .ball {
  width: 80px;
  height: 80px;
  position: absolute;
  border-radius: 90px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  /* box-shadow: 0px 0px 20px #0000ff5c; */
}

/* 6个球 总共运行一圈的时间为24秒  每个球的间隔时间为 4秒*/
.area > .ball1 {
  background-image: url("../../../assets/img/zf/3d1.png");
  animation: anmiteX 16s cubic-bezier(0.36, 0, 0.64, 1) -8s infinite alternate,
    anmiteY 16s cubic-bezier(0.36, 0, 0.64, 1) -0s infinite alternate,
    scale 32s cubic-bezier(0.36, 0, 0.64, 1) -0s infinite alternate;
}
.area > .ball2 {
  background-image: url("../../../assets/img/zf/3d4.png");
  animation: anmiteX 16s cubic-bezier(0.36, 0, 0.64, 1) -12s infinite alternate,
    anmiteY 16s cubic-bezier(0.36, 0, 0.64, 1) -4s infinite alternate,
    scale 32s cubic-bezier(0.36, 0, 0.64, 1) -4s infinite alternate;
}
.area > .ball3 {
  background-image: url("../../../assets/img/zf/3d2.png");
  animation: anmiteX 16s cubic-bezier(0.36, 0, 0.64, 1) -16s infinite alternate,
    anmiteY 16s cubic-bezier(0.36, 0, 0.64, 1) -8s infinite alternate,
    scale 32s cubic-bezier(0.36, 0, 0.64, 1) -8s infinite alternate;
}
.area > .ball4 {
  background-image: url("../../../assets/img/zf/3d3.png");
  animation: anmiteX 16s cubic-bezier(0.36, 0, 0.64, 1) -20s infinite alternate,
    anmiteY 16s cubic-bezier(0.36, 0, 0.64, 1) -12s infinite alternate,
    scale 32s cubic-bezier(0.36, 0, 0.64, 1) -12s infinite alternate;
}
.area > .ball5 {
  background-image: url("../../../assets/img/zf/3d5.png");
  animation: anmiteX 16s cubic-bezier(0.36, 0, 0.64, 1) -24s infinite alternate,
    anmiteY 16s cubic-bezier(0.36, 0, 0.64, 1) -16s infinite alternate,
    scale 32s cubic-bezier(0.36, 0, 0.64, 1) -16s infinite alternate;
}
.area > .ball6 {
  background-image: url("../../../assets/img/zf/3d6.png");
  animation: anmiteX 16s cubic-bezier(0.36, 0, 0.64, 1) -28s infinite alternate,
    anmiteY 16s cubic-bezier(0.36, 0, 0.64, 1) -20s infinite alternate,
    scale 32s cubic-bezier(0.36, 0, 0.64, 1) -20s infinite alternate;
}
.area > .ball7 {
  background-image: url("../../../assets/img/zf/3d7.png");
  animation: anmiteX 16s cubic-bezier(0.36, 0, 0.64, 1) -32s infinite alternate,
    anmiteY 16s cubic-bezier(0.36, 0, 0.64, 1) -24s infinite alternate,
    scale 32s cubic-bezier(0.36, 0, 0.64, 1) -24s infinite alternate;
}
.area > .ball8 {
  background-image: url("../../../assets/img/zf/3d8.png");
  animation: anmiteX 16s cubic-bezier(0.36, 0, 0.64, 1) -36s infinite alternate,
    anmiteY 16s cubic-bezier(0.36, 0, 0.64, 1) -28s infinite alternate,
    scale 32s cubic-bezier(0.36, 0, 0.64, 1) -28s infinite alternate;
}
/* 动画 */

/* 在X轴上的移动 */
@keyframes anmiteX {
  from {
    left: -50px;
  }
  to {
    left: 390px;
  }
}
/* 在轴上Y的移动 */
@keyframes anmiteY {
  from {
    top: 0;
  }
  to {
    top: 270px;
  
  }
}
/* 对球进行放大和缩小在视觉上进行远近的模拟 */
@keyframes scale {
  0% {
    transform: scale(0.9, 0.9);
  }
  50% {
    transform: scale(1, 1);
  }
  100% {
    transform: scale(0.9, 0.9);
  }
}

@keyframes mymove {
  from {
    width: 0px;
  }
  to {
    width: 150px;
  }
}
@keyframes mymove1 {
  from {
    left: 0px;
  }
  to {
    left: 150px;
  }
}
.moveson {
  height: 2px;
  background: #00a3ff;
  border-radius: 2px 0 0 2px;
  animation: mymove 5s linear infinite;
  position: relative;
  top: 3px;
}
// .moveson::before {
//   position: absolute;
//   top: 0;
//   bottom:0;
//   left:2px;
//   right:0;
//   width: 2px;
//   height: 2px;
//   content: "";
//   z-index: 100;
//   margin: 0;
//   background: #1382dd;
//   border-radius: 0 2px 2px 0;
//   animation: mymove1 5s linear infinite;
// }
</style>
